<template>
    <div>
        <toubu></toubu>

        <div class="headImg_and_name">
            <div class="headImg_and_name_inner">
                <img src="http://admin.xukunqi.com/public/static/headimage.png" height="75" width="75" class="head_img">
                <div class="name_and_username">
                    <div class="name">
                        {{$store.state.myselfAttribute.name}}
                    </div>
                    <div class="username">
                        琪琪号：{{$store.state.myselfAttribute.username}}
                    </div>
                </div>
            </div>
        </div>

        <div class="appendMessage">
            个性签名：{{$store.state.myselfAttribute.styleMessage}}
        </div>

        <div class="logout" @click.stop="logout">
            退出登录
        </div>

        <dibu></dibu>
    </div>
</template>

<script>
    import toubu from '@/components/toubu';
    import dibu from '@/components/dibu';
    import Cookies from 'js-cookie';
    export default {
        name: "wode",
        components:{
            toubu,
            dibu,
        },

        mounted() {

        },
        methods:{
            logout(){
                Cookies.remove('username');
                Cookies.remove('password');
                this.$router.replace('/login');
            },
        },
    }
</script>

<style scoped>
    .headImg_and_name{width: 100%;}
    .headImg_and_name_inner{width: calc(100% - 40px); margin: 0 auto;display: flex;flex-direction: row;background-color: #f8f8f8;border-radius: 15px;}
    .head_img{border-radius: 5px;margin-left: 5px;}
    .name_and_username{margin-left: 7px;}
    .name{font-size: 18px;line-height: 18px;margin-top: 20px;}
    .username{font-size: 12px;line-height: 12px;margin-top: 9px;}

    .appendMessage{height: 48px;width: calc(100% - 40px); margin: 0 auto;background-color: #f8f8f8;margin-top: 18px;font-size: 17px;line-height: 48px;}

    .logout{height: 45px;width: calc(100% - 40px); margin: 17px auto;background-color: red;color: white;outline: none;border-radius: 5px;font-size: 17px;line-height: 45px;text-align: center;}

</style>